<template>
    <view class="component-order-action">
        <block v-if="order.listType == 't1' || order.listType == 't2'">
            <block v-if="order.state == 1">
                <view class="btn normal">待客户支付</view>
            </block>
            <block v-if="order.state == 2">
                <view class="btn active" @click.stop="confirmPrice">
                    <text>确认完成</text>
                </view>
            </block>
            <block v-if="order.state == 4">
                <view class="btn normal">待客户支付尾款</view>
            </block>
            <block v-if="order.state == 5">
                <view class="btn normal">待客户确认</view>
            </block>
            <block v-if="order.state == 6">
                <view class="btn normal">已完成</view>
            </block>
            <block v-if="order.state == 7">
                <view class="btn" @click.stop="refund">同意退款</view>
                <view class="btn" @click.stop="appeal">申诉</view>
            </block>
            <block v-if="order.state == 8">
                <view class="btn normal">退款成功</view>
            </block>
        </block>
        <block v-if="order.listType == 't3'">
            <block v-if="order.state == 2">
                <view class="btn normal">待客户确认</view>
            </block>
            <block v-if="order.state == 3">
                <view class="btn normal">已完成</view>
            </block>
        </block>
    </view>
</template>

<script>
export default {
    name: "component-order-action",
    data() {
        return {
            models: this.$models,
        };
    },
    props: {
        order: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
        /**
         * 确认价格
         */
        confirmPrice() {
            this.$emit("confirmPrice");
        },
        /**
         * 退款
         */
        refund() {
            this.$models.order
                .refundOrder({
                    request: {
                        api: "order.refund." + this.order.listType,
                        data: {
                            id: this.order.id,
                        },
                    },
                })
                .then((response) => {
                    this.$utils.toast(response.msg).then(() => {
                        this.$emit("refresh");
                    });
                })
                .catch((e) => {
                    this.$utils.toast(e);
                });
        },
        /**
         * 申诉
         */
        appeal() {
            this.$utils.toPage("/pages/order/appeal?list=" + this.order.listType + "&id=" + this.order.id);
        },
    },
};
</script>

<style lang="less" scoped>
.component-order-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn {
        display: block;
        font-size: 26rpx;
        padding: 16rpx 30rpx;
        line-height: 26rpx;
        border-radius: 30rpx;
        margin-left: 20rpx;
        color: #999999;
        box-sizing: border-box;
        border: 1px solid #999999;
    }
    .btn.active {
        color: #ffffff;
        background-color: #8b9beb;
        border: 1px solid #8b9beb;
    }
    .btn.normal {
        color: #999999;
        background-color: unset;
        padding: 0;
        border: 0;
    }
}
</style>